<template>
	<view>
		<view class="container" :style="{paddingBottom:130 + bottomLift+'rpx'}">
			<view class="lg-item">
				<view class="lg-item-title">
					<text>{{$t('order.logisticsStage')}}</text> <!--物流阶段-->
				</view>
				<view class="lg-item-content">
					<!-- <view class="lg-item-data select"> -->
					<!-- <input placeholder="" value="自行发货" :disabled="true" /> -->
					<!-- <i class="iconfont iconarrow-right1"></i> -->
					<!-- </view> -->
					<u-radio-group v-model="checked">
						<u-radio shape="circle" :name="1">{{$t('order.selfDelivery1')}}</u-radio><!--自行发货-->
					</u-radio-group>
				</view>
			</view>
			<view class="lg-item">
				<view class="lg-item-title">
					<text>{{$t('order.segmentName')}}</text><!--分段名称-->
					<text class="required">*</text>
				</view>
				<view class="lg-item-content">
					<picker @change="bindPickerChange($event,0)" :range="section" range-key="name">
						<view class="lg-item-data select">
							<input :placeholder="$t('publicLang.pleaseChoose')" v-model="formItem.name" :disabled="true" />
							<i class="iconfont iconarrow-right1"></i>
						</view>
					</picker>
				</view>
			</view>
			<view class="lg-item">
				<view class="lg-item-title">
					<text>{{$t('order.courierCompany')}}</text><!--快递公司-->
					<text class="required">*</text>
				</view>
				<view class="lg-item-content">
					<picker @change="bindPickerChange($event,1)" :range="express" range-key="name">
						<view class="lg-item-data select">
							<input :placeholder="$t('publicLang.pleaseChoose')" v-model="expressSelect" :disabled="true" />
							<i class="iconfont iconarrow-right1"></i>
						</view>
					</picker>
				</view>
			</view>
			<view class="lg-item">
				<view class="lg-item-title">
					<text>{{$t('order.trackingNumber')}}</text><!--快递单号-->
					<text class="required">*</text>
				</view>
				<view class="lg-item-content">
					<view class="lg-item-data">
						<input v-model="formItem.expressCode" :placeholder="$t('order.pleaseEnterTheCourierNumber')" />
					</view>
				</view>
			</view>
			<view class="lg-item">
				<view class="lg-item-title">
					<text>{{$t('order.phoneNumber')}}</text><!--手机号-->
				</view>
				<view class="lg-item-content">
					<view class="lg-item-data">
						<input v-model="formItem.phone" :placeholder="$t('order.pleaseEnterTheMobilePhoneNumber')" />
					</view>
				</view>
			</view>
			<!-- <view class="tips">
				<view>注：</view>
				<view>1）终端物流（发到用户手里的物流信息）有且只有一个；</view>
				<view>2）系统订单自动完成时间为：终端物流签收时间后3天。</view>
			</view> -->
		</view>
		<view class="buttonBox" :style="{bottom:bottomLift+'rpx'}">
			<view class="button1" @click="useSysDelivery">{{$t('order.usePlatformLogistics')}}</view><!--使用平台物流-->
			<view class="button" @click="submit">{{$t('order.confirmDelivery')}}</view><!--确认发货-->
		</view>
	</view>
</template>

<script>
	let app = getApp();
	import {
		expressList,
		orderSendApi,
		sysDeliveryMerApi
	} from '@/api/order.js';
	export default {
		data() {
			return {
				// formItem: {
				// 	logisticsStage: 1,
				// 	expressId: '',
				// 	expressCode: '',
				// 	phone: '',
				// 	orderInfoId: '',
				// 	id: '',
				// 	level: 1,
				// 	type: 1, // 1为发货，2为增段
				// },
				formItem: {
					type: 1,
					logisticsType: 0,
					expressId: '',
					expressCode: '',
					id: '',
					orderInfoId: '',
					name: '',
					level: 1,
					phone: '',
					channel: 1
				},
				// array: [{
				// 	name: '头程物流',
				// 	value: 1
				// }, {
				// 	name: '中转物流',
				// 	value: 2
				// }, {
				// 	name: '终端物流',
				// 	value: 3
				// }],
				express: [],
				checked: 1,
				expressSelect: '',
				bottomLift: app.globalData.bottomLift,
			}
		},
		computed:{
			section(){
				return [{
					name: this.$t('order.sendToTransitWarehouse')
				}, {
					name: this.$t('order.logisticsExpress')
				}]
			}
		},
		onLoad(options) {
			this.formItem.level = options.level
			this.formItem.orderInfoId = options.orderInfoId
			this.formItem.id = options.id
			uni.setNavigationBarTitle({
				title: options.level == 1 ? this.$t('order.ship') : this.$t('order.additionalLogistics')
			})
			this.getList()
		},
		methods: {
			// 物流公司列表
			getList() {
				expressList({
					page: 1,
					limit: 999,
					isShow: 1
				}).then(async res => {
					this.express = res.data.list
				})
			},
			bindPickerChange(e, type) {
				if (type == 0) {
					console.log(e.detail.value)
					this.formItem.name = this.section[e.detail.value].name
				}
				if (type == 1) {
					this.formItem.expressId = this.express[e.detail.value].id
					this.expressSelect = this.express[e.detail.value].name
				}

			},
			// 使用平台物流
			useSysDelivery() {
				console.info(this.formItem)
				var _this = this
				uni.showModal({
					title: this.$t('publicLang.hint'),
					content: this.$t('order.confirmTheUseOfPlatformLogistics'),
					cancelText:_this.$t('publicLang.cancel'),
					confirmText: _this.$t('publicLang.sure'),
					success: function(res) {
						if (res.confirm) {
							uni.showLoading({
								title: _this.$t('order.pleaseWait')
							})
							sysDeliveryMerApi(_this.formItem.orderInfoId).then(async res => {
								uni.hideLoading()
								uni.showToast({
									title: _this.$t('publicLang.successfulOperation'),
									icon: "none"
								})
								const eventChannel = _this.getOpenerEventChannel();
								eventChannel.emit('acceptDataFromOpenedPage');
								uni.navigateBack({})
							}).catch((e)=>{
								uni.hideLoading()
								uni.showToast({
									title: e,
									icon: "none"
								})
							})
						}
					}
				});

			},
			submit() {
				console.log(this.formItem)
				var _this=this
				if (this.formItem.name == "" || this.formItem.name == undefined || this.formItem.name == null) {
					uni.showToast({
						title: `${this.$t('order.segmentNameCannotBeEmpty')}！`,
						icon: "none"
					})
					return
				}
				if (!this.formItem.expressId) {
					uni.showToast({
						title: `${this.$t('order.courierCompanyCannotBeEmpty')}！`,
						icon: "none"
					})
					return
				}
				if (this.formItem.expressCode == "" || this.formItem.expressCode == undefined || this.formItem
					.expressCode == null) {
					uni.showToast({
						title: `${this.$t('order.theCourierNumberCannotBeEmpty')}！`,
						icon: "none"
					})
					return
				}
				if (this.formItem.expressId == '188' && this.formItem.phone.length != 4) {
					uni.showToast({
						title: `${this.$t('order.pleaseEnterTheMobilePhoneNumber')}！`,
						icon: "none"
					})
					return
				}
				
				uni.showToast({
					title: this.$t('order.deliverySuccessfully'),
					icon: "none"
				})
				uni.showLoading({
					title: this.$t('order.pleaseWait')
				})
				orderSendApi(this.formItem).then((res) => {
					uni.hideLoading()
					uni.showToast({
						title: this.$t('order.deliverySuccessfully'),
						icon: "none"
					})
					const eventChannel = _this.getOpenerEventChannel();
					eventChannel.emit('acceptDataFromOpenedPage');
					uni.navigateBack({

					})
				}).catch((e) => {
					uni.hideLoading()
					uni.showToast({
						title: e,
						icon: "none"
					})
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #FFFFFF !important;
	}

	.container {
		margin: 0 40rpx;

		.lg-item {
			margin-top: 40rpx;
			overflow: hidden;

			.lg-item-title {
				font-size: 32rpx;
				font-weight: bold;

				.required {
					color: #ff0000;
				}
			}

			.lg-item-content {
				margin: 30rpx 0;

				.lg-item-data {
					height: 88rpx;
					width: 670rpx;
					background-color: #F2F2F2;
					padding: 24rpx;

					.iconfont {
						color: #999999;
						font-size: 24rpx;
					}
				}

				.select {
					display: flex;
					align-items: center;
					justify-content: space-between;
				}
			}
		}

		.tips {
			color: #999999;
			font-size: 20rpx;
			margin-bottom: 60rpx;
		}
	}

	.buttonBox {
		position: fixed;
		box-shadow: 0 -2rpx 8rpx rgba(41, 42, 50, 0.1);
		padding: 20rpx 40rpx;
		width: 100%;
		display: flex;
		z-index: 999;

		.button {
			flex: 1;
			height: 90rpx;
			text-align: center;
			line-height: 90rpx;
			background-color: rgba(0, 0, 0, .9);
			color: #FFFFFF;
		}

		.button1 {
			flex: 1;
			height: 90rpx;
			text-align: center;
			line-height: 90rpx;
			background-color: white;
			border: 1rpx solid black;
			margin-right: 10rpx;
		}
	}
</style>
